<template>
	<view>
		<view style="height: 30upx;">
			<view style="width: 750upx;height: 300upx;border-radius: 0upx 0upx 20upx 20upx;background-color: #FBC241;"></view>
		</view>
		<view class="title flex-column-between">
			<label style="font-size: 42upx;" >待发货</label>
			<label>您的订单已提交，请耐心等候</label>
		</view>
		<view class="info">
			<label class="info-number">订单号：1234512316546</label>
			<view>
				<view class="info-main flex-between">
					<image src="https://alipic.lanhuapp.com/xd0cdfd74b-ef97-4ec2-9c91-ddd2bc15bf5e" mode="aspectFill"></image>
					<view class="flex-column-between" style="width: 340upx;height: 100%;">
						<label class="info-main-title">西班牙伊比利亚黑猪肉</label>
						<label class="info-main-info">西班牙黑猪肉带骨猪里脊肉 新鲜猪排，经核酸检测放心食用 经核酸检测放心食用 经核酸检测放心食用</label>
						<label style="font-size: 20upx;font-weight: 500;color: #FF9C46;white-space: nowrap;">发货时间：卖家承诺7个工作日左右发货</label>
					</view>
				</view>
				<view class="flex-between" style="margin-top: 30upx; font-size: 24upx;color: #666666;">
					<label>购买数量</label>
					<label>×2</label>
				</view>
			</view>
			<van-divider hairline />
			<view slot="title" class="info-address-item flex-align">
				<image src="../../static/location.png"></image>
				<view style="margin-left: 10upx;width: 500upx;">
					<view>
						<label>张三</label>
						<label style="margin-left: 20upx;">156845462135</label>
					</view>
					<view>成都市金牛区人民北路成都市金牛区人民北路</view>
				</view>
			</view>
			<van-divider hairline />
			<view class="server flex-around">
				<view class="buttonCenter" style="width: 68upx;height: 34upx;background: #FFB758;border-radius: 4upx;">服务</view>
				<view class="server-label flex-between">
					<image src="../../static/yun.png" mode="aspectFill"></image>
					<label class="server-label-text">运费特惠</label>
				</view>
				<view class="server-label flex-between">
					<image src="../../static/tui.png" mode="aspectFill"></image>
					<label class="server-label-text">无忧退货</label>
				</view>
				<view class="server-label flex-between">
					<image src="../../static/you.png" mode="aspectFill"></image>
					<label class="server-label-text">直邮送达</label>
				</view>
			</view>
			<van-divider hairline />
			<view style="text-align: right;">
				<view style="font-size: 24upx;font-weight: bold;color: #333333;">运费：￥20.00</view>
				<view class="flex-between" style="margin-top: 30upx;flex-direction: row-reverse;">
					<view style="font-size: 32upx;font-weight: bold;color: #333333;">合计<label style="color:#FF4646">￥1500.00</label></view>
				</view>
			</view>
		</view>
		<button class="button" style="margin-top: 80upx;" @click="goTo('/pages/return/index')">取消订单</button>
	</view>
</template>

<script>
</script>

<style>
	page{
		background-color: #F7F7F7;
	}
</style>
<style lang="scss" scoped>
	.title{
		padding: 0 32upx;
		height: 118upx;
		font-size: 28upx;
		font-weight: bold;
		color: #FFFFFF;
	}
	.info{
		padding: 30upx;
		margin: 24upx;
		background: #FFFFFF;
		border-radius: 10upx;
		.info-number{
			font-size: 28upx;
			font-weight: bold;
			color: #666666;
		}
		.info-main{
			margin-top: 40upx;
			width: 100%;
			height: 200upx;
			image{
				width: 266upx;
				height: 200upx;
			}
			.info-main-title{
				width: 340upx;
				font-size: 32upx;
				font-weight: bold;
				color: #333333;
				white-space: nowrap;
				overflow: hidden;
				text-overflow: ellipsis;
			}
			.info-main-info{
				width: 340upx;
				height: 80upx;
				font-size: 24upx;
				font-weight: 500;
				color: #666666;
				white-space: nowrap;
				overflow: hidden;
				text-overflow: ellipsis;
			}
		}
		.info-address-item{
			font-size: 28upx;
			font-weight: 500;
			color: #666666;
			image{
				width: 32upx;
				height: 32upx;
			}
		}
	}
	.server{
		font-size: 24upx;
		font-weight: 500;
		color: #FFFFFF;
		background-color: #FFFFFF;
		.server-label{
			width: 138upx;
			height: 32upx;
			image{
				width: 32upx;
				height: 32upx;
			}
			.server-label-text{
				color: #666666;
			}
		}
	}
	.price{
		width: 158upx;
		height: 44upx;
		background: #FF5353;
		border-radius: 10upx;
		font-size: 24upx;
		font-weight: bold;
		color: #FFFFFF;
	}
</style>
